<template>
  <div class="term-management-container">
    <div class="page-header">
      <div class="title">借阅期限管理</div>
      <div class="subtitle">智能期限控制系统</div>
    </div>

    <div class="route-info">
      <a-breadcrumb>
        <a-breadcrumb-item
          ><router-link to="/files"><FolderOutlined />档案文件管理</router-link></a-breadcrumb-item
        >
        <a-breadcrumb-item
          ><router-link to="/files/borrow-system"><AuditOutlined />档案借阅系统</router-link></a-breadcrumb-item
        >
        <a-breadcrumb-item><CalendarOutlined />{{ $route.meta.title }}</a-breadcrumb-item>
      </a-breadcrumb>
    </div>

    <div class="content-section">
      <a-card title="借阅期限管理" :bordered="false">
        <a-table :columns="termColumns" :data-source="borrowTerms" :pagination="{ pageSize: 10 }">
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'status'">
              <a-tag :color="getStatusColor(record.status)">{{ record.status }}</a-tag>
            </template>
            <template v-if="column.key === 'action'">
              <a-space>
                <a-button size="small">续期</a-button>
                <a-button size="small">催还</a-button>
              </a-space>
            </template>
          </template>
        </a-table>
      </a-card>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { HomeOutlined, FolderOutlined, AuditOutlined, CalendarOutlined } from '@ant-design/icons-vue'

const termColumns = [
  { title: '借阅者', dataIndex: 'borrower', key: 'borrower' },
  { title: '档案名称', dataIndex: 'fileName', key: 'fileName' },
  { title: '借阅时间', dataIndex: 'borrowTime', key: 'borrowTime' },
  { title: '归还期限', dataIndex: 'returnDeadline', key: 'returnDeadline' },
  { title: '剩余天数', dataIndex: 'remainingDays', key: 'remainingDays' },
  { title: '状态', key: 'status' },
  { title: '操作', key: 'action', width: 150 }
]

const borrowTerms = ref([
  { borrower: '李时珍', fileName: '生死簿第123卷', borrowTime: '2023-12-01', returnDeadline: '2023-12-15', remainingDays: 5, status: '正常' },
  { borrower: '王守仁', fileName: '业力评定册', borrowTime: '2023-11-20', returnDeadline: '2023-12-05', remainingDays: -5, status: '逾期' },
  { borrower: '苏东坡', fileName: '转世记录册', borrowTime: '2023-12-03', returnDeadline: '2023-12-17', remainingDays: 7, status: '正常' }
])

const getStatusColor = (status) => {
  const colorMap = {
    正常: 'success',
    即将到期: 'warning',
    逾期: 'error'
  }
  return colorMap[status] || 'default'
}
</script>

<style lang="scss" scoped>
.term-management-container {
  padding: 24px;

  .page-header {
    text-align: center;
    margin-bottom: 24px;

    .title {
      font-size: 28px;
      font-weight: bold;
      color: $secondary-color;
      margin-bottom: 8px;
    }

    .subtitle {
      font-size: 14px;
      color: $text-secondary;
    }
  }

  .route-info {
    margin-bottom: 24px;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid rgba(212, 153, 10, 0.2);
  }

  .content-section {
    :deep(.ant-card) {
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(212, 153, 10, 0.2);
      border-radius: 12px;
    }
  }
}
</style>
